<template>
  <baidu-map
      class="bm-view"
      @ready="initMap"
      :style="{height: '100%'}"
      :zoom="15"
      :center="{lng: 116.404, lat: 39.915}"
      :scroll-wheel-zoom="true"
      :map-click="true"
             ak="lKTF6dTPp0bflD1mToHqAhmfIhGml6mn" v="3.0" type="API"

  >
    <!-- 二维地图和卫星地图 -->
    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"></bm-map-type>
<!--    <bm-panorama class="bm-panorama" ></bm-panorama>-->
    <!-- 比例尺 -->
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<!--    <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>-->
    <!-- 缩略图 -->
    <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
    <!-- 全景控件 -->
<!--    <bm-panorama anchor="BMAP_ANCHOR_TOP_LEFT"></bm-panorama>-->
    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
<!--    全景显示-->
<!--    <bm-panorama anchor="BMAP_ANCHOR_TOP_LEFT"></bm-panorama>-->
    <!-- 获取现在的位置 -->
    <bm-geolocation @ready="getLocation" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-geolocation>
<!--    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>-->
    <bm-marker :position="{lng: lng, lat: lat}" :dragging="true" @dragend="getLocation"></bm-marker>
<!--    路线-->
    <bm-polyline :path="path" :stroke-color="'blue'" :stroke-weight="5" :stroke-opacity="0.5"></bm-polyline>
<!--    指南针-->
    <bm-compass anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-compass>
<!--    导航-->
    <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
  </baidu-map>

  <div class="bm-view">
    <div class="bm-panorama">
      <bm-panorama></bm-panorama>
    </div>
  </div>
  <div id="mapContainer" style="height: 500px; width: 100%;"></div>
  <button @click="addMarker">在点击位置添加标记</button>

  <!-- ...地图代码... -->
  <div v-if="showForm">
    <form @submit.prevent="submitForm">
      <input v-model="formData.location" placeholder="地点描述" />
      <input v-model="formData.info" placeholder="更多信息" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script setup>
import {
  BaiduMap,
  BmNavigation,
  BmMapType,
  BmScale,
  BmOverviewMap,
  BmCityList,
  BmPanorama,
  BmGeolocation,
    BmPolyline,
    BmMarker,
} from 'vue-baidu-map-3x'
import { ref, onMounted } from 'vue';
import {getMapList} from "@/api/changebattery/map";
const map = ref(null)
const lng = ref()
const lat = ref()
const BMAP_STATUS_SUCCESS = 0


let formData = ref({ location: '', info: '' });
let showForm = ref(false);


const addMarker = () => {
  showForm.value = true;
  // 假设这里通过某种方式（如点击地图事件）获取坐标并设置到formData
};

const submitForm = async () => {
  try {
    // await axios.post('/your-api-endpoint', formData.value);
    alert('信息提交成功！');
    showForm.value = false;
    // 清空表单等操作...
  } catch (error) {
    console.error('提交失败:', error);
  }
};

const sites = ref([]); // 用于存储从数据库获取的站点信息
// 模拟从数据库获取站点信息，实际项目中应替换为axios或其他方法
const fetchSitesFromDatabase = async () => {
  // 假设你有这样一个异步函数来获取数据
  // const response = await axios.get('/api/sites');
  // sites.value = response.data;
  // 为了示例，我们直接填充一些假数据
  sites.value = [
    { name: '站点A', longitude: 116.388, latitude: 39.905 },
    { name: '站点B', longitude: 116.412, latitude: 39.920 },
  ];
};

onMounted(() => {
  fetchSitesFromDatabase();
});
// 自动定位并获取现在的经度纬度
// 点击定位-定位到当前位置
const getLocation = ({BMap, map}) => {
  const geolocation = new BMap.Geolocation()
  geolocation.getCurrentPosition(function (r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {

      lng.value = r.point.lng
      lat.value = r.point.lat
      console.log('获取到您的位置：' + r.point.lng + ',' + r.point.lat)
      console.log('获取到您的位置：' + r.point.lng + ',' + r.point.lat)
    //   将标记点添加到地图
      map.value.addOverlay(new BMap.Marker(r.point))
      console.log(r.point)
    } else {
      console.log('failed' + this.getStatus())
    }
  })
}
const initMap = ({BMap, map}) => {
  console.log(BMap, map)
  map.value = map
  const geolocation = new BMap.Geolocation()
  geolocation.getCurrentPosition(function (r) {
  }, {enableHighAccuracy: true})
  console.log(geolocation)
  //圈出地图轮廓
  const boundary = new BMap.Boundary()
  boundary.get(
      "北京市", function (rs) {
    const count = rs.boundaries.length
    // alert(count)
    if (count === 0) {
      console.log('未能获取当前城市')
      return
    }
    for (let i = 0; i < count; i++) {
      const ply = new BMap.Polygon(rs.boundaries[i], {
        strokeWeight: 2,
        strokeColor: '#0022ff',
        strokeOpacity: 0.5,
        strokeStyle: 'dashed'
      })
      map.value.addOverlay(ply)
    }
    console.log("rs")
    console.log(rs)
  })
}
//导航
</script>

<style scoped>

/* 这里没有清除百度地图API水印 */
.bm-view {
  width: 100%;
  height: 100%;
  margin: auto;
}
/* 去除水印 */
::v-deep(.anchorBL) {
  display: none;
}

</style>
